import React from "react";
import {useEffect, useState} from "react";


//typescript类型声明
export interface  User{
    id:string;
    name:string;
    email:string;
    title:string;
    organization:string;
}

interface SearchPannelProps{
    users: User[];
    param:{
        name:string;
        personId:string;
    },
    setParam:(param:SearchPannelProps['param'])=>void
}


export  const  SearchPanel=({users,param,setParam}:SearchPannelProps)=>{
    //变量声明，状态提升
    // const[param,setParam]=useState({
    //     name: '',               //项目名
    //     personId: ''            //项目负责人
    // });
    //下拉列表用户声明
    // const [users,setUsers]=useState([]);

    //状态提升到父组件
    // //项目列表
    // const [list,setList]=useState([]);
    //
    // //接口请求,param改变的时候，同步请求项目列表
    // useEffect(()=>{
    //      fetch('').then(async response=>{
    //          if(response.ok){
    //                 setList(await  response.json())
    //          }
    //      })
    // },[param])

    return <form action="">
        <div>
           {/*setParam(Object.assign({},param,{name:evt.target.value}))*/}
           <input type="text" value={param.name} onChange={evt=>setParam({
               ...param,
               name:evt.target.value
           })}/>
           <select value={param.personId} onChange={evt=>setParam({
               ...param,
               personId: evt.target.value
           })}>
               <option value={''}>负责人</option>
               {
                 users.map(user=><option key={user.id} value={user.id}>{user.name}</option>)
               }
           </select>


        </div>
    </form>
}